<template>
  <div>


    <!-- ***** Header Area Start ***** -->
    <header class="header-area header-sticky">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <nav class="main-nav">

              <!-- ***** Logo Start ***** -->
              <a class="logo">
                <img src="../assets/template-res/assets/images/logo.png" alt="">
              </a>
              <!-- ***** Logo End ***** -->

              <!-- ***** Search End ***** -->
              <div class="search-input">
                <!--                <form id="search" action="#">-->
                <!--                  <input type="text" placeholder="Type Something" id='searchText' name="searchKeyword"-->
                <!--                         onkeypress="handle"/>-->
                <!--                  <i class="fa fa-search"></i>-->
                <!--                </form>-->
              </div>
              <!-- ***** Search End ***** -->

              <!-- ***** Menu Start ***** -->


              <ul class="nav">
                <li><a :class="[curNavName=='Home'?'active':''   ,'route-link']" @click="navRoute('Home')">Home</a></li>
                <li><a :class="[curNavName=='Browse'?'active':'' ,'route-link']" @click="navRoute('Browse')">Browse</a>
                </li>
                <li><a :class="[curNavName=='Details'?'active':'','route-link']"
                       @click="navRoute('Details')">Details</a></li>
                <li><a :class="[curNavName=='Streams'?'active':'','route-link']"
                       @click="navRoute('Streams')">Streams</a></li>
                <li><a :class="[curNavName=='Profile'?'active':'','route-link']" @click="navRoute('Profile')">
                  Profile <img src="@/assets/template-res/assets/images/profile-header.jpg" alt="">
                </a>
                </li>
              </ul>


              <a class='menu-trigger'>
                <span>Menu</span>
              </a>
              <!-- ***** Menu End ***** -->
            </nav>
          </div>
        </div>
      </div>
    </header>
    <!-- ***** Header Area End ***** -->


  </div>
</template>


<style scoped>
@import url("@/assets/template-res/vendor/bootstrap/css/bootstrap.min.css");
@import url("@/assets/template-res/assets/css/fontawesome.css");
@import url("@/assets/template-res/assets/css/templatemo-cyborg-gaming.css");
@import url("@/assets/template-res/assets/css/owl.css");
@import url("@/assets/template-res/assets/css/animate.css");

.route-link {

  cursor: pointer;

}

</style>

<script>

// href="index.html"
// href="browse.html"
// href="details.html"
// href="streams.html"
// href="profile.html"

//region （描述：模板原始依赖）


// bootstrap
// jquery
// popper
// modernizr.custom
// owl.carousel
// wowjs
// count-to
// bootsnav


import 'bootstrap/dist/js/bootstrap.js'
// import "../assets/template-res/vendor/bootstrap/js/bootstrap.min.js"

// import 'jquery/dist/jquery.min.js'
// import 'jquery'
// import "../assets/template-res/vendor/jquery/jquery.min.js"

import Isotope from 'isotope-layout'
// import 'isotope-layout'
// import 'isotope-layout/dist/isotope.pkgd.min.js'
// import "../assets/template-res/assets/js/isotope.min.js"

// import 'vue-owl-carousel'
import "@/assets/template-res/assets/js/owl-carousel.js"

import "@/assets/template-res/assets/js/tabs.js"

import "@/assets/template-res/assets/js/popup.js"


// import "../assets/template-res/assets/js/custom.js"


import 'swiper';
import 'swiper/css/swiper.min.css';

//endregion


export default {
  name: "PageHeader",
  data() {
    return {

      navRouteNameMap: {
        '/': 'Home'
        , '/browse': 'Browse'
        , '/details': 'Details'
        , '/streams': 'Streams'
        , '/profile': 'Profile'
      },

      //路由名字与路由的映射
      navNameRouteMap: {
        'Home': '/',
        'Browse': '/browse',
        'Details': '/details',
        'Streams': '/streams',
        'Profile': '/profile'
      },

      //当前显示的nav名字
      curNavName: 'Home',

    }
  },
  created() {


    let url = location.hash;
    console.log("location.hash ===", location.hash)
    let startIndex = url.indexOf("#") > -1 ? url.indexOf("#") : 0;
    // console.log("url.indexOf(\"#\") ===", url.indexOf("#"))

    let endIndex = url.indexOf("?") > -1 ? url.indexOf("?") : url.length;
    // console.log("url.indexOf(\"?\") ===", url.indexOf("?"))
    let curPath = url.substring(startIndex + 1, endIndex)
    console.log("curPath ===", curPath)
    this.curNavName = this.navRouteNameMap[`${curPath}`]

  },
  mounted() {
    this.customInit();
    // console.log("this.$route.path",this.$route.path)

  },
  methods: {


    //模板中自定义的初始化方法
    customInit: function () {

      //region  WOW JS 初始化相关操作
      $(window).on('load', function () {
        if ($(".wow").length) {
          let wow = new WOW({
            boxClass: 'wow',      // Animated element css class (default is wow)
            animateClass: 'animated', // Animation css class (default is animated)
            offset: 20,         // Distance to the element when triggering the animation (default is 0)
            mobile: true,       // Trigger animations on mobile devices (default is true)
            live: true,       // Act on asynchronously loaded content (default is true)
          });
          wow.init();
        }
      });
      //endregion

      //region （描述：监听窗口滑动）
      $(window).scroll(function () {
        let scroll = $(window).scrollTop();
        let box = $('.header-text').height();
        let header = $('header').height();
        if (scroll >= box - header) {
          $("header").addClass("background-header");
        } else {
          $("header").removeClass("background-header");
        }
      });
      //endregion

      //region （描述：同位素相关初始化操作）
      let elem = null;

      if ($('.grid').length) {
        elem = $('.grid')[0];
      }
      let $grid = null;
      if (elem) {
        $grid = new Isotope(elem, {
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
        });
      }
      $('.filters ul li').click(function () {
        $('.filters ul li').removeClass('active');
        $(this).addClass('active');

        let data = $(this).attr('data-filter');

        if ($grid) {
          $grid.isotope({
            filter: data
          })
        }
      });
      //endregion


      let width = $(window).width();
      $(window).resize(function () {
        if (width > 992 && $(window).width() < 992) {
          location.reload();
        } else if (width < 992 && $(window).width() > 992) {
          location.reload();
        }
      })


      $(document).on("click", ".naccs .menu div", function () {
        let numberIndex = $(this).index();

        if (!$(this).is("active")) {
          $(".naccs .menu div").removeClass("active");
          $(".naccs ul li").removeClass("active");

          $(this).addClass("active");
          $(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

          let listItemHeight = $(".naccs ul")
              .find("li:eq(" + numberIndex + ")")
              .innerHeight();
          $(".naccs ul").height(listItemHeight + "px");
        }
      });

      $('.owl-features').owlCarousel({
        items: 3,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 2
          },
          1200: {
            items: 3
          },
          1800: {
            items: 3
          }
        }
      })

      $('.owl-collection').owlCarousel({
        items: 3,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          800: {
            items: 2
          },
          1000: {
            items: 3
          }
        }
      })

      $('.owl-banner').owlCarousel({
        items: 1,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 1
          },
          1000: {
            items: 1
          }
        }
      })


      //region （描述：菜单按键点击事件绑定）
      // Menu Dropdown Toggle
      if ($('.menu-trigger').length) {
        $(".menu-trigger").on('click', function () {
          $(this).toggleClass('active');
          $('.header-area .nav').slideToggle(200);
        });
      }
      //endregion


      // Menu elevator animation
      $('.scroll-to-section a[href*=\\#]:not([href=\\#])').on('click', function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          let target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

          if (target.length) {
            let width = $(window).width();
            if (width < 991) {
              $('.menu-trigger').removeClass('active');
              $('.header-area .nav').slideUp(200);
            }
            $('html,body').animate({
              scrollTop: (target.offset().top) - 80
            }, 700);
            return false;
          }
        }
      });

      $(document).ready(function () {
        $(document).on("scroll", onScroll);

        //smoothscroll
        $('.scroll-to-section a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");

          $('.scroll-to-section a').each(function () {
            $(this).removeClass('active');
          })
          $(this).addClass('active');

          let target = this.hash, menu = target;
          target = $(this.hash);
          $('html, body').stop().animate({
            scrollTop: (target.offset().top) - 79
          }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
          });
        });
      });

      function onScroll(event) {
        let scrollPos = $(document).scrollTop();
        $('.nav a').each(function () {
          let currLink = $(this);

          let refElement = $(currLink.attr("href"));

          if (refElement.length) {
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
              $('.nav ul li a').removeClass("active");
              currLink.addClass("active");
            } else {
              currLink.removeClass("active");
            }
          }
        });
      }


      // Page loading animation
      $(window).on('load', function () {
        if ($('.cover').length) {
          $('.cover').parallax({
            imageSrc: $('.cover').data('image'),
            zIndex: '1'
          });
        }

        $("#preloader").animate({
          'opacity': '0'
        }, 600, function () {
          setTimeout(function () {
            $("#preloader").css("visibility", "hidden").fadeOut();
          }, 300);
        });
      });


      const dropdownOpener = $('.main-nav ul.nav .has-sub > a');

      // Open/Close Submenus
      if (dropdownOpener.length) {
        dropdownOpener.each(function () {
          let _this = $(this);

          _this.on('tap click', function (e) {
            let thisItemParent = _this.parent('li'),
                thisItemParentSiblingsWithDrop = thisItemParent.siblings('.has-sub');

            if (thisItemParent.hasClass('has-sub')) {
              let submenu = thisItemParent.find('> ul.sub-menu');

              if (submenu.is(':visible')) {
                submenu.slideUp(450, 'easeInOutQuad');
                thisItemParent.removeClass('is-open-sub');
              } else {
                thisItemParent.addClass('is-open-sub');

                if (thisItemParentSiblingsWithDrop.length === 0) {
                  thisItemParent.find('.sub-menu').slideUp(400, 'easeInOutQuad', function () {
                    submenu.slideDown(250, 'easeInOutQuad');
                  });
                } else {
                  thisItemParent.siblings().removeClass('is-open-sub').find('.sub-menu').slideUp(250, 'easeInOutQuad', function () {
                    submenu.slideDown(250, 'easeInOutQuad');
                  });
                }
              }
            }

            e.preventDefault();
          });
        });
      }


    }

    //头部导航路由
    , navRoute(navName = '') {

      if (navName == this.curNavName) {
        return;
      }

      this.curNavName = navName;
      let path = this.navNameRouteMap[`${navName}`];
      this.$router.push({path: path});
    },
  }


}
//@import url("https://unpkg.com/swiper@7/swiper-bundle.min.cs");

</script>


